<template>
  <view class="body">
    <view class="tabs">
      <view class="tab">
        <text :class="tab == 'fbg' ? 'active' : ''" @tap="tabChange('fbg', '空腹血糖')">
          空腹血糖
        </text>
        <view v-if="tab == 'fbg'" class="tab_active"></view>
      </view>
      <view class="tab">
        <text :class="tab == 'pbg' ? 'active' : ''" @tap="tabChange('pbg', '餐后2小时血糖')">
          餐后2小时血糖
        </text>
        <view v-if="tab == 'pbg'" class="tab_active"></view>
      </view>
    </view>
    <view class="unit">单位: mmol/L</view>
    <view>
      <view class="echart" v-show="tab == 'fbg'">
        <qiun-data-charts
          :canvas2d="true"
          canvasId="fbg1"
          type="line"
          :opts="opts"
          :chartData="chartData1"
        />
      </view>
      <view class="echart" v-show="tab == 'pbg'">
        <qiun-data-charts
          :canvas2d="true"
          canvasId="fbg2"
          type="line"
          :opts="opts"
          :chartData="chartData2"
        />
      </view>
    </view>
    <view class="xtitle">
      <text v-for="(item, index) of xTitles" :key="index" class="xtext">{{ item }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import qiunDataCharts from '@/module/common/qiun-data-charts/qiun-data-charts.vue'
import { ref, onMounted, watch } from 'vue'
import { signsInfoPage } from '@/api/body'
import { formatDate } from '@/utils/util'
import { deepCopy } from '@/utils/tools'

let chart = ref()
const tab = ref('')
const xTitles = ref([])

const props = defineProps({
  empi: String,
  type: String
})

const fbgMarkLine = {
  type: 'dash',
  dashLength: 8,
  data: [
    {
      value: 3.9,
      lineColor: '#FFCF41',
      showLabel: true,
      labelAlign: 'right',
      labelPadding: 1,
      labelBgOpacity: 0,
      labelBgColor: '#fff',
      labelFontSize: 12
    },
    {
      value: 6.1,
      lineColor: '#FFCF41',
      showLabel: true,
      labelAlign: 'right',
      labelPadding: 1,
      labelBgOpacity: 0,
      labelBgColor: '#fff',
      labelFontSize: 12
    }
  ]
}
const pbgMarkLine = {
  type: 'dash',
  dashLength: 8,
  data: [
    {
      value: 7.8,
      lineColor: '#FFCF41',
      showLabel: true,
      labelAlign: 'right',
      labelPadding: 1,
      labelBgOpacity: 0,
      labelBgColor: '#fff',
      labelFontSize: 12
    }
  ]
}

const opts = {
  color: ['#FFCF41'],
  padding: [20, 30, 10, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true,
    disabled: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    splitNumber: 6,
    data: [
      {
        min: 0,
        max: 30
      }
    ]
  },
  extra: {
    line: {
      type: 'straight',
      width: 2,
      activeType: 'hollow'
    },
    markLine: {}
  }
}

const chartData1 = ref()
const chartData2 = ref()

const chartData_fbg = ref()
const chartData_pbg = ref()

watch(
  () => chartData_fbg.value,
  (n, o) => {
    if (!o || JSON.stringify(n) !== JSON.stringify(o)) {
      chartData1.value = deepCopy(n)
    }
  }
)

watch(
  () => chartData_pbg.value,
  (n, o) => {
    if (!o || JSON.stringify(n) !== JSON.stringify(o)) {
      chartData2.value = deepCopy(n)
    }
  }
)

onMounted(() => {
  tabChange('fbg', '空腹血糖')
})

const getList = (item: string, name: string) => {
  let params = {
    page: 1,
    limit: 5,
    empi: props.empi, // userInfo.value.empi
    itemList: [item]
  }
  signsInfoPage(params).then((res) => {
    const categories = []
    const series = []
    const data = []
    if (res.data && res.data.list.length > 0) {
      res.data.list.map((v) => {
        v[item] = v[item].toFixed(1)
        data.unshift(v[item])
        categories.unshift(formatDate(v.collectTime, 'MM-dd\nhh:mm'))
        xTitles.value = categories
      })
    }
    series.push({
      name: name,
      data: data
    })
    if (item === 'fbg') {
      chartData_fbg.value = {
        categories: categories,
        series: series
      }
    } else {
      chartData_pbg.value = {
        categories: categories,
        series: series
      }
    }
  })
}

const tabChange = (item: string, name: string) => {
  tab.value = item
  xTitles.value = []
  if (tab.value == 'fbg') {
    opts.extra.markLine = fbgMarkLine
  } else {
    opts.extra.markLine = pbgMarkLine
  }
  getList(item, name)
}
</script>

<style lang="scss" scoped>
.body {
  padding: 32rpx;
  margin-bottom: 32rpx;
  background: #ffffff;
  border-radius: 12rpx;
  .echart {
    width: 100%;
    height: 360rpx !important;
  }
  .tabs {
    width: 100%;
    height: 84rpx;
    background: #fff;
    border-bottom: 1px solid #e5e6eb;
    margin-bottom: 20rpx;
    .tab {
      display: inline-block;
      padding: 0 32rpx;
      height: 84rpx;
      color: #666666;
      font-weight: 400;
      font-size: 28rpx;
      text {
        display: block;
        height: 78rpx;
        line-height: 78rpx;
      }
      .active {
        font-size: 36rpx;
        font-weight: bold;
        color: #222222;
      }
      .tab_active {
        width: 24rpx;
        height: 6rpx;
        background: #02bcc3;
        border-radius: 4rpx;
        margin: 0 auto;
      }
    }
  }
  .unit {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    margin: 20rpx 0;
  }
  .xtitle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-left: 50rpx;
    .xtext {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
  }
}
</style>
